<template>
  <view class="van-progress" :style="{
		height: typeof strokeWidth === 'string' ? strokeWidth : strokeWidth + 'px'
	}">
    <text class="van-progress__portion" :style="{
			width: typeof percentage === 'string' ? percentage : percentage + '%'
		}"></text>
    <text class="van-progress__pivot" :style="{
			left: typeof percentage === 'string' ? percentage : percentage + '%',
			transform: 'translate(-' + (typeof percentage === 'string' ? percentage : percentage + '%') + ', -50%)'
		}"
          v-if="showPivot">{{ pivotText || (typeof percentage === 'string' ? percentage : percentage + '%') }}
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  watch: {},
  props: {
    percentage: {
      type: [Number, String],
      default: 0
    },
    strokeWidth: {
      type: [Number, String],
      default: '4px'
    },
    showPivot: {
      type: Boolean,
      default: true
    },
    pivotText: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: 'var(--color)'
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.van-progress {
  position: relative;
  background: #ebedf0;
  z-index: 1;

  .van-progress__portion {
    position: absolute;
    left: 0;
    height: 100%;
    background: 'var(--color)';
    transition: all 0.3s;
  }

  .van-progress__pivot {
    position: absolute;
    left: 0;
    top: 50%;
    box-sizing: border-box;
    min-width: 72rpx;
    font-size: 24rpx;
    line-height: 32rpx;
    color: #fff;
    border-radius: 16rpx;
    text-align: center;
    transition: all 0.3s;
  }
}
</style>